<template>
	<view class="pages" style="background-color: #fff;">
		<view class="title _paddingTop">
			投诉查询结果
		</view>
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view  class="commonBox" id="chezhutousu">
				<view class="tabBox _flex _paddingTop "
					style="padding-bottom: 20rpx;margin-left: 11px;border-bottom: 1px solid#eee;">
					<view @click="tabComplainChange(index)" v-for="(item,index) in tabComplainList" :key="index"
						style="text-align: center;margin-right: 60rpx;">
						<view :class="['tabName', activeComplain==index?'active':'']">
							{{item.name}}款 {{item.cxing}}
						</view>
					</view>
				</view>
				<view class="" style="background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;">
					<view class="">
						累计投诉
						<text style="color:#C70F0F ;">1</text>
						条、涉及2个故障
					</view>
				</view>
				<view class="" style="border: 1px solid #eee;border-top: 0px;">
					<view class="_flex _justify_between"
						style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;">
						<view class="">
							八大系统故障
						</view>
						<view class="" style="color:#002B56 ;">
							共2个故障
						</view>
					</view>
					<view class="" style="padding: 11px;">
						<view class="_flex" v-for="(item,index) in breakdownList" :key="index">
							<text class="breakDownName">{{item.name}}</text>
							<view class="" style="width: 60%;">
								<u-line-progress active-color="#002B56" :percent="item.num"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view class="" style="border: 1px solid #eee;border-top: 0px;">
				<view class="_flex _justify_between"
					style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx;">
					<view class="">
						典型投诉
					</view>
				</view>
				<view class="_flex _justify_between _wrap" style="padding: 11px;">
					<view class="_flex _marginTop" style="border: 1px solid #002B56;color: #002B56;font-size: 24rpx;"
						v-for="(item,index) in complaintList" :key="index">
						<text style="background: #002B56;color: #fff;padding: 10rpx;">{{item.name}}</text>
						<text style="padding: 10rpx;display: inline-block;">{{item.desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view class="" style="border: 1px solid #eee;border-top: 0px;">
				<view class="_flex _justify_between"
					style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx;">
					<view class="">
						问题简述
					</view>
				</view>
		
		<view class="questionDesc">
			<u-time-line v-for="(item,index) in questionDesc" :key="index">
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #002a58;">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="_flex _justify_between" style="width: 100%; display: flex; justify-content: space-between;">
								<view class="u-order-title">{{item.name}}</view>
					
							</view>
							<view class="" style="color: #999;">
								{{item.tssj}}
							</view>
							<view class="u-order-desc"  style="width: 750rpx;">说明：{{item.wtms}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				activeComplain: 0, //车主投诉tab栏
				tabComplainList: [
					{
						name: "2020",
						cxing:'领先型'
					},
				],
				breakdownList: [{
						name: "车身附件及电器",
						num: 80
					},
					{
						name: "制动系统",
						num: 60
					},
					{
						name: "转向系统",
						num: 20
					},
					{
						name: "轮胎",
						num: 20
					},
					{
						name: "电池",
						num: 10
					},
					{
						name: "电机",
						num: 0
					},
					{
						name: "电控",
						num: 0
					},
					
					{
						name: "前后桥及悬挂系统",
						num: 0
					},
				],
				// 典型投诉
				complaintList: [
					{
						name: "车身附件及电器",
						desc: "影音系统故障31个"
					},{
						name: "车身附件及电器",
						desc: "同款不同配置26个"
					}, 
					{
						name: "车身附件及电器",
						desc: "车载互联故障14个"
					}, 
					{
					name: "销售欺诈",
					desc: "与宣传不符8个"
				}, {
					name: "服务态度",
					desc: "态度蛮横3个"
				},
				 {
					name: "服务收费",
					desc: "变相收费7个"
				},
				{
					name: "承诺不兑现",
					desc: "提不到车5个"
				}
				],
				questionDesc:[{
				  "tssj": "2011-11-05",
				  "wtms": "陕汽通家福家轮胎起包服务站处理拖沓",
				  "name": "服务态度,承诺不兑现"
				},
				{
				  "tssj": "2012-03-07",
				  "wtms": "陕汽通家富家新车减震器故障",
				  "name": "前后桥及悬挂系统,服务态度,销售欺诈"
				}],
			};
		},
		methods: {
			// 车主投诉tab栏
			tabComplainChange(idx) {
				this.activeComplain = idx
			},
			myComplain(){
				uni.navigateTo({
					url:"./myComplain"
				})
			}
		}
	};
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped>
	.breakListbox{
		display: flex;
		flex-wrap: wrap;
	}
	.breakList{ padding:5rpx 0;}
	.dxts{ margin-right: 20rpx; }
	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
	}

	.carBaseName {
		color: #888;
		display: inline-block;
		width: 200rpx;
	}
	.batteryBox{
		width: 50%;
		    line-height: 52rpx;
	}
	.dataBgColDark{
		background-color: #002A58;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
	}
	.dataBgCol{
		background-color: #E5E5E5;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}
	.commonBox {
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 20rpx;
		
	}
	.commonTitle{
		color: #002A55;
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}
	
	.tabBox {
		color: #002B56;
		align-items: flex-end;
		margin-top: 20rpx;
	}
	
	.tabName {
		font-size: 30rpx;
	}
	
	.tabBox .active {
		font-size: 36rpx;
		font-weight: bold;
		color: #002B56;
	}
	.breakDownName {
		display: inline-block;
		margin-right: 11px;
		width: 260rpx;
	}
	.fixed_posit{
		    opacity: 0.7;
		    position: fixed;
		    background: #577771;
		    bottom: 20%;
		    color: #fff;
		    padding: 20rpx 30rpx;
		    right: 10px;
		    border-radius: 50%;
	}
	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
		
		padding-bottom: 10rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.questionDesc{
		padding:24rpx 34rpx;
		box-sizing: border-box;
	}
	.u-time-axis{
		display: none;
	}
		.u-time-axis::before{
			display: none;
		}
</style>